<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#shengli {
				background-image: url(img/游戏结束了.png);
				width: 315px;
				height: 193px;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -157px;
				margin-left: -96px;
				font-size: 30px;
				line-height: 60px;
				text-align: center;
			}
			#main {
				margin: 0px auto;
				width: 600px;
			}
		</style>
	</head>

	<body>
		<div id="shengli" style="display: none;">
			<p id="shenglip">白方胜利</p>
			<input id="btn" type="button" value="重新开始" onclick="btnclient()"/>
		</div>
		<div id="main">
			<p>
				<span id="span">白方下棋</span>
			</p>
			<canvas id="mycanvas" width="500" height="500" onMouseMove="shouzhi()"></canvas>
		</div>
		<audio id="audio" src="audio/五子棋_bg 音乐.mp3" loop="loop"></audio>
		<audio id="audio02" src="audio/五子棋-向下.wav"></audio>
		<script type="text/javascript">
			var ad = document.getElementById("audio");
			var ad02 = document.getElementById("audio02");
			var sl = document.getElementById("shengli");
			var slp = document.getElementById("shenglip");
			var canvas = document.getElementById("mycanvas");
			var cxt = canvas.getContext("2d");
			var isbai = true;
			var qizi = [];
			ad.play();
			init();

			function init() {
				drawqipan();
				chushihua();
			}
			//画棋盘
			function drawqipan() {
				cxt.fillStyle = "orange";
				cxt.fillRect(0, 0, 500, 500);
				cxt.strokeRect(10, 10, 480, 480);
				for (var i = 0; i < 15; i++) {
					cxt.beginPath();
					cxt.moveTo(i * 32 + 25, 25);
					cxt.lineTo(i * 32 + 25, 474);
					cxt.stroke();
					cxt.beginPath();
					cxt.moveTo(25, i * 32 + 25);
					cxt.lineTo(474, i * 32 + 25);
					cxt.stroke();
				}
			}
			//初始化
			function chushihua() {
				qizi = []
				for (var i = 0; i < 15; i++) {
					qizi[i] = []
					for (var k = 0; k < 15; k++) {
						qizi[i][k] = 0
					}
				}
			}

			function xiaqi() {
				canvas.onclick = function() {
					var vx = event.offsetX - 25;
					var vy = event.offsetY - 25;
					for (var x = 0; x < 15; x++) {
						for (y = 0; y < 15; y++) {
							var z = Math.sqrt(Math.pow((x * 32 - vx), 2) + Math.pow((y * 32 - vy), 2));
							if (z < 15 && vx > 0 && vy > 0) {
								ad02.play();
								if (qizi[y][x] == 0) {
									qizi[y][x] = isbai ? 1 : 2;
									cxt.beginPath();
									cxt.translate(25, 25);
									cxt.fillStyle = isbai ? "white" : "black";
									cxt.arc(x * 32, y * 32, 15, 0, 2 * Math.PI);
									cxt.fill();
									cxt.translate(-25, -25);
									yanzheng(x, y);
									isbai = !isbai;
									var span = document.getElementById("span");
									span.innerHTML = isbai ? "白方下棋" : "黑方下棋";
								}
							}
						}
					}
				}
			}

			function yanzheng(currx, curry) {
				var qinum = 0; //用来存放当前方向上练成线的棋子数
				//横向
				for (var x = 0; x < 15; x++) {
					if (qizi[curry][x] == (isbai ? 1 : 2)) {
						qinum++
						again(qinum);
					} else {
						qinum = 0
					}
				}
				//纵向
				for (var y = 0; y < 15; y++) {
					if (qizi[y][currx] == (isbai ? 1 : 2)) {
						qinum++
						again(qinum);
					} else {
						qinum = 0
					}
				}
				//斜向上开始循环，起始点所在列是0，行是curry+currx，结束点的行为0，列是curry+currx
				vy = (currx + curry >= 14 ? 14 : curry + currx)
				vx = currx + curry - vy
				for (; vx >= 0 && vy >= 0 && vx <= 14 && vy <= 14; vy--, vx++) {
					if (qizi[vy][vx] == (isbai ? 1 : 2)) {
						qinum++
						again(qinum);
					} else {
						qinum = 0
					}
				}
				//斜向下
				vx = (currx >= curry ? 14 : 14 - (curry - currx))
				vy = (curry >= currx ? 14 : 14 - (currx - curry))
				for (; vx >= 0 && vy >= 0 && vx <= 14 && vy <= 14; vy--, vx--) {
					if (qizi[vy][vx] == (isbai ? 1 : 2)) {
						qinum++
						again(qinum);
					} else {
						qinum = 0
					}
				}
				return false
			}

			function again(qinum) {
				if (qinum == 5) {
					if (isbai) {
						slp.innerHTML="白方胜利";
					} else {
						slp.innerHTML="黑方胜利";
					}
					sl.style.display="block";
					ad02.src="audio/五子棋_非盟的胜利.wav";
					ad02.play();
					
					ad.load();
					return true
				}
			}

			function shouzhi() {
				var vx = event.offsetX - 25;
				var vy = event.offsetY - 25;
				for (var x = 0; x < 15; x++) {
					for (y = 0; y < 15; y++) {
						var z = Math.sqrt(Math.pow((x * 32 - vx), 2) + Math.pow((y * 32 - vy), 2));
						if (z < 15 && vx > 0 && vy > 0) {
							document.getElementById("mycanvas").style.cursor = "pointer";
							xiaqi();
							return;
						} else {
							document.getElementById("mycanvas").style.cursor = "default";
						}
					}
				}
			}
			function btnclient(){
				ad02.src="audio/五子棋-向下.wav";
				sl.style.display="none";
				init();
				ad.play();
				isbai=true;
				span.innerHTML = isbai ? "白方下棋" : "黑方下棋";
			}
		</script>
	</body>

</html>